<template>
  <div class="org-chart-page">
    <van-nav-bar title="组织架构图(仅查看)" />

    <div class="chart-container">
      <OrganizationChart ref="organizationChartRef" :data=companyData :width="chartWidth" :height="chartHeight" />
    </div>

    <!-- 移动端适配的操作按钮 -->
    <van-action-sheet v-model:show="showControls" title="操作面板">
      <div class="controls-content">
        <van-button type="primary" block @click="updateData">
          更新数据
        </van-button>
        <van-button type="success" block @click="addNode">
          添加节点
        </van-button>
        <van-button type="warning" block @click="resetView">
          重置视图
        </van-button>
        <van-button type="primary" block @click="captureChart">
          截图保存
        </van-button>
      </div>
    </van-action-sheet>

    <!-- 固定在底部的浮动按钮 -->
    <div class="floating-buttons">
      <!-- <van-button type="primary" round @click="showControls = true" class="control-btn">
        <van-icon name="bars" />
      </van-button> -->

      <!-- <van-button type="success" round @click="showHelp = true" class="help-btn">
        <van-icon name="question-o" />
      </van-button> -->
      <van-floating-bubble v-model:show="showHelp" :axis="'xy'" magnetic="x" position="bottom-right"
        @click="showHelp = true">
        <van-icon name="question-o" size="25" />
      </van-floating-bubble>
    </div>



    <van-popup v-model:show="showHelp" round position="bottom" :style="{ height: '40%' }">
      <van-cell-group>
        <van-cell title="操作说明" />
        <van-cell>
          <p>• 双指缩放图表</p>
          <p>• 单指拖动图表</p>
          <p>• 按键收缩/展开节点</p>
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import OrganizationChart from '../components/OrganizationChart.vue';
import { getEnterpriseById } from '../api/enterprise';
// 在 OrganizationChartPage.vue 中引入组件
// 添加组件 name 选项
defineOptions({
  name: 'OrganizationChartPage'
})

const showControls = ref(false);
const showHelp = ref(false);
const chartWidth = ref(window.innerWidth);
const chartHeight = ref(window.innerHeight - 120); // 调整高度以适应导航栏和按钮



// 更新数据示例
const updateData = () => {
  // 数据更新逻辑现在在组件内部处理
  console.log('数据已更新');
  showControls.value = false; // 操作后关闭面板
};

// 添加节点示例
const addNode = () => {
  // 节点添加逻辑现在在组件内部处理
  console.log('节点已添加');
  showControls.value = false; // 操作后关闭面板
};

// 重置视图
const resetView = () => {
  window.location.reload();
  showControls.value = false; // 操作后关闭面板
};


// 处理屏幕旋转和窗口大小变化
const handleResize = () => {
  setTimeout(() => {
    chartWidth.value = window.innerWidth;
    chartHeight.value = window.innerHeight - 120; // 重新计算高度
  }, 300);
};
//导出截图
const organizationChartRef = ref()

const captureChart = () => {
  organizationChartRef.value?.exportToImage()
}
const companyData = ref()
const fetchChart = async (id: any) => {
  const response: any = await getEnterpriseById(id)
  if (response.code === 200) {
    companyData.value = JSON.parse(response.data.orgJson)
    console.log('获取数据成功', companyData.value)
  } else {
    console.log('获取数据失败')
  }
}
onMounted(async () => {
  window.addEventListener('orientationchange', handleResize);
  window.addEventListener('resize', handleResize);
  let user = JSON.parse(localStorage.getItem('user')!)
  await fetchChart(user.enterpriseId)

});
</script>

<style scoped>
.org-chart-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-container {
  flex: 1;
  overflow: hidden;
}

.controls-content {
  padding: 16px;
}

.controls-content .van-button {
  margin: 10px 0;
}

.van-popup p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
  text-align: left;
}

.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 15vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.floating-buttons .van-button {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>